<template>
	<view>
		<!-- 旋转轴 -->
		<scroll-view scroll-x class="bg-white margin-bottom nav" scroll-with-animation>
			<!-- classifyList -->
			<view class="cu-item" :class="index==orderNum?'text-red cur':''" 
			v-for="(item,index) in typeDataList"
				:key="index" @tap="orderNum = index" >
				{{item.name}}
			</view>
		</scroll-view>
		
		<view v-if="typeIndex ==3 || typeIndex== 4 ">
			<!-- 主轴数量 -->
			<view class="rowsb padding" v-for="(item,index) in typeList" :key='index'
				@click="typeActiveNumMen(item,index)">
				<view class="align-center">
					<image :src="typeActiveNum==index?'/static/icon/xz.png':'/static/icon/wxz.png'" mode=""
						style="width: 40rpx;height: 40rpx;"></image>
					<text class="margin-left-sm">{{item.name}}</text>
				</view>
				<view class="align-center">
					<view class=" align-center">
						<image src="/static/icon/jian.png" mode="" class="jupian_icon" @click="jNumRed(item,index)">
						</image>
						<text class="margin-lr-sm">{{item.num}}</text>
						<image src="/static/icon/jia.png" mode="" class="jupian_icon" @click="jNumAdd(item,index)">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="padding flex flex-wrap">
				<view class="" v-for="(item,index) in typeList " :key='index' @click="typeActiveNumMen(item,index)"
					:class="['type_body',{ type_body_active:index == typeActiveNum}]">
					{{item.name}}
				</view>
			</view>
			<view class="padding" v-if="typeImage" @click="preview(0,[typeImage])">
				<image :src="typeImage" mode="aspectFill" style="width: 100%;height: 300rpx;" class="radius-sm ">
				</image>
			</view>
		</view>
		<view class="bg-red text-center padding margin radius" style="position: fixed;bottom: 0;left: 0;right: 0;"
			@click="submitType()">
			确认选择
		</view>


		<moreLoading v-if="typeList==''"></moreLoading>
	</view>
</template>

<script>
	import {
		preview
	} from '@/common/updataImgList.js'
	import {
		getProductType
	} from '@/common/path.js'
	export default {
		data() {
			return {
				//默认选中分类列表
				orderNum: 0,
				//默认子分类展示的样式
				typeActiveNum: 0,
				//列表下级分类
				typeList: [],
				//列表数据
				typeDataList: [],

				//查询接口的pid - 请求参数
				typePid: '',
				//选中的信息
				typeData: {},
				//选择的下标
				typeIndex: '',
				//展示图片
				typeImage: '',

				jNum: 0, //主轴数量
				//电压id
				relation_id: '',

			}
		},
		watch: {
			orderNum(event) {
				this.typeList = this.typeDataList[event].subordinate

			}
		},

		onLoad(options) {
			this.typePid = options.pid
			this.typeIndex = options.index
			if (options.dyid) {
				this.relation_id = options.dyid


			}
			this.getProductType()
		},
		onShow() {

		},
		methods: {
			//图片预览
			preview(index, array) {
				preview(index, array)
			},
			//选择
			typeActiveNumMen(item, index) {
				this.typeActiveNum = index
				this.typeData = item
				this.typeImage = item.image
				// this.$tools.showToast(`${item.name}`)
			},
			//获取产品分类
			getProductType() {
				let data = {}
				if (this.relation_id) { //如果有传递参数就是获取 z轴列表 
					data = {
						pid: this.typePid,
						relation_id: this.relation_id
					}
				} else {
					data = {
						pid: this.typePid
					}
				}
				this.$axios.axios('POST', getProductType, data)
					.then((res) => {
						if (res.code == 1) {
							let array = uni.getStorageSync(`productTypeList`)[this.typeIndex]
							if (this.typeIndex == 3) { //如果是选择主轴可以填写数量
								res.data.forEach(item => {
									if (undefined != array) {
										if (array.id == item.id) {
											item.num = array.num ? array.num : 0
										} else {
											item.num = 0
										}
									} else {
										item.num = 0
									}
								})
							}
							// console.log('[产品分类]', res.data);
							res.data.forEach((item) => { //如果 是二级
								if (item.subordinate.length > 0) {
									this.typeList = res.data[0].subordinate
									this.typeDataList = res.data
									this.typeImage = res.data[0].subordinate[0].image
								} else {
									this.typeImage = res.data[0].image
									this.typeList = res.data

								}
							})
							// console.log('[轴]', array);

							console.log('[1]', this.typeList[0].num);
							console.log('[2]', uni.getStorageSync('productTypeList')[4].num);
							if (this.typeIndex == 4) { //如果是选择  锯片 数量
								this.typeList[0].num = uni.getStorageSync('productTypeList')[4].num //锯片数量
							}

						}
					})
			},
			//减少主轴数量
			jNumRed(item, index) {
				console.log('[数据]', item);
				if (item.num <= 0) {
					this.$tools.showToast('已经不能在减少了')
				} else {
					item.num--
				}
				this.$forceUpdate()
			},
			//增加主轴数量
			jNumAdd(item, index) {
						item.num++
				// let productTypeList2 = uni.getStorageSync('productTypeList')
				// let count = productTypeList2[4].num + productTypeList2[3].num

				// if (this.typeIndex == 3) {
				// 	if (productTypeList2[2].num > 1 && productTypeList2[2].num > count) {
				// 		item.num++
				// 	} else {
				// 		this.$tools.showToast('锯片数量+主轴数量 必须 = Z轴数量')
				// 	}

				// }


				console.log('[数据]', item);
				this.$forceUpdate()
			},
			//提交
			submitType() {
				
				let _this = this
				let list = uni.getStorageSync(`productTypeList`)
				let arrayList = list ? list : []
				arrayList[this.typeIndex] = _this.typeList[_this.typeActiveNum]
				if(this.typeIndex ==2){
					
					
					}
					// uni.removeStorage({  key: 'userinfo', });
			
				uni.setStorageSync(`productTypeList`, arrayList)
				setTimeout((res) => {
					uni.navigateBack({
						delta: 1
					})
				}, 100)
				// _this.$tools.showToast2('选择完成')
			}
		}
	}
</script>

<style>
	.type_body {
		background-color: white;
		margin: 10rpx;
		border-radius: 8rpx;
		padding: 20rpx 60rpx;
	}

	.type_body_active {
		background-color: red !important;
		margin: 10rpx;
		border-radius: 8rpx;
		padding: 20rpx 60rpx;
		color: white !important;
	}

	page {
		background-color: #f7f7f7;
	}

	.jupian_icon {
		height: 50rpx;
		width: 50rpx;
	}

	page {
		background: #F4F6F6;
	}

	.classify_title {
		font-size: 30rpx;
		font-family: PingFang SC;
		opacity: 1;
		color: #757575;
	}

	.classify_title_active {
		font-size: 30rpx;
		font-family: PingFang SC;
		opacity: 1;
		color: red;
		font-weight: bold;
	}

	.classify_heng {
		height: 4rpx;
		background: red;
		border-radius: 2rpx;
	}

	.type_body {
		background-color: white;
		margin: 10rpx;
		border-radius: 8rpx;
		padding: 20rpx;
	}

	.type_body_active {
		background-color: red;
		margin: 10rpx;
		border-radius: 8rpx;
		padding: 20rpx;
		color: white !important;
	}

	page {
		background-color: #f7f7f7;
	}
</style>
